Skip to main content

js+css 下拉菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>下拉菜单</title>
</head>

<!–Css –>
<style>
*{
    margin:0px;
    padding:0px;
}
#nav{
    list-style-type:none;
    font-size:12px;
}
#nav li{
    float:left;
    width:80px;
    position:relative;
    /*控制下拉框的位置，让它在 "菜单二"的"LI"下面活动*/
    height:22px;
    /*这个一定要定义的，"菜单"一栏的高度，也是onmouseover和onmouseout使用的范围*/
    padding-top:4px;
}
#nav li ul{
    display:none;
    /*让菜单二下面的"ul"不要显示，配合onmouseover和onmouseout显示*/
    position:absolute;
    /*让菜单二下面的下拉"UL"显示，并不要把菜单栏撑大（撑大效果见下面，我会贴出来的，哈哈）*/
    top:22px;
    /*此属性唯有定义了position:absolute;属性才能使用，是定位下拉框的，距离上面多少*/
    left:0px;
    /*此属性唯有定义了position:absolute;属性才能使用，是定位下拉框的，距离左边多少*/
    border:1px solid #C4E4FF;
}
#nav li ul li{
    float:left;
    background-color:#F7FCFF;
    padding:2px 2px 2px 8px;
    width:80px
}
#nav li:hover ul , #nav li.over ul{
    display:block;
    /*显示下拉框*/
}
</style>




<!–js –>
<script>
function viewNav(){
    navRoot=document.getElementById("nav").getElementsByTagName("li");
//找到id为nav，下面所有LI标签
for (i=0; i< navRoot.length;i++){
    navRoot[i].onmouseover=function(){
        this.className += " over";
//给LI标签加上css类"over"，加空格是为了防止之前已经定义css类。
}
navRoot[i].onmouseout=function(){
    this.className=this.className.replace(" over",");
    //去除之前加上的"over"，注意前面有空格
}
}
}
window.onload=viewNav;
</script>

<body>

<ul id="nav">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a>
<!–我是下拉菜单，属于菜单二–>
<ul>
<li><a href="#">菜单二（1）</a></li>
<li><a href="#">菜单二（2）</a></li>
<li><a href="#">菜单二（3）</a></li>
</ul>
</li>
<!–下拉菜单结束–>
<li><a href="#" >菜单三</a>
<ul>
<li><a href="#">菜单三（1）</a></li>
<li><a href="#">菜单三（2）</a></li>
<li><a href="#">菜单三（3）</a></li>
</ul>
</li>
</ul>
</body>
</html>